<template>
    <div style="height: 100%;">
        <!-- 设置地图容器 -->
        <div ref="map" style="height: 100%;"></div>
    </div>
</template>
<script>
export default {
    methods: {
        // 封装加载地图方法
        loadMap() {
            AMapLoader.load({
                key: "186ecedd1cafa96003d1046c5c4efd1d", //申请好的Web端开发者 Key，调用 load 时必填
                version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
            })
                .then((AMap) => {
                    // 地图初始化
                    const map = new AMap.Map(this.$refs.map, {
                        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                        viewMode: '3D', //地图模式
                        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                        zoom: 17, //初始化地图层级
                        rotation: -15, //初始地图顺时针旋转的角度
                        zooms: [2, 20], //地图显示的缩放级别范围
                        center: [103.735244, 36.057372],//初始地图中心经纬度
                        terrain: true //开启地形图
                    });
                    // 交通图层 
                    // const traffic = new AMap.TileLayer.Traffic({
                    //     autoRefresh: true, //是否自动刷新，默认为false
                    //     interval: 180, //刷新间隔，默认180s
                    // });
                    // map.add(traffic);
                    const position = new AMap.LngLat(103.735244, 36.057372); //Marker 经纬度
                    const marker = new AMap.Marker({
                        position: position,
                        title: '兰州理工大学'
                    });
                    map.add(marker);
                })
                .catch((e) => {
                    console.error(e); //加载错误提示
                });
        }
    },
    mounted() {
        this.loadMap();
    }

}
</script>
<style scoped></style>